<template>
  <view class="head">
    <view class="header-wrap">
      <view class="index-header">
        <view style="width: 20%"></view>
        <view style="width: 60%" class="address" v-if="leftWords">{{
          leftWords
        }}</view>
        <view class="input-wrap" v-if="input">
          <input
            type="text"
            placeholder="请输入搜索"
            v-model="value"
            @change="inputChange"
          />
          <text class="iconfont iconfangdajing"></text>
        </view>
        <view style="width: 20%"></view>
      </view>
      <view class="map-wrap" v-if="rightWords || rightIcon" @click="rightClick">
        <view class="iconfont" :class="rightIcon"></view>
        <text>{{ rightWords }}</text>
      </view>
    </view>
    <view class="blank"></view>
  </view>
</template>

<script>
export default {
  name: "IndexHeader",
  props: ["leftWords", "input", "rightIcon", "rightWords"],
  data() {
    return {
      value: "",
    };
  },
  methods: {
    inputChange: function () {
      this.$emit("change", this.value);
    },
    rightClick: function () {
      this.$emit("rightClick", "");
    },
  },
};
</script>

<style lang="scss" scoped>
$color-base: #18c7e1;
$words-color-base: #333333;
$words-color-light: #999999;
.header-wrap {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;

  .index-header {
    height: 88upx;
    line-height: 88upx;
    padding: 0 30upx;
    padding: 100upx 0 50upx;
    background-color: $color-base;
    font-size: 28upx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .address {
      font-size: 36upx;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .input-wrap {
      width: 500upx;
      height: 70upx;
      padding: 10upx 30upx 10upx 100upx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 50upx;
      color: $words-color-base;
      position: relative;

      text {
        position: absolute;
        left: 40upx;
        top: -8upx;
        color: $words-color-light;
        font-size: 30upx;
      }
    }
  }
  .map-wrap {
    position: fixed;
    top: 70upx;
    right: 30upx;
    text-align: center;
    color: #fff;
    .iconfont {
      font-size: 30upx;
      height: 24upx;
      margin: 0;
      padding: 0;
    }
    text {
      font-size: 20upx;
    }
  }
}
.blank {
  height: 126upx;
  // background-color: $color-base;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  .index-header {
    background-color: #1b1c1e !important;
  }
}
</style>